<template>
  <el-card class="box-card">
    <el-input
      v-model.trim="filterText"
      size="small"
      prefix-icon="el-icon-search"
      placeholder="输入关键字进行过滤"
      maxlength="30"
      style="margin: 16px 0 0 0;"
    />
    <div class="left-title" />
    <el-menu class="el-menu-demo" mode="vertical" @select="handleSelect">
      <template>
        <menu-item v-for="item in menuList" :key="item.id" :data="item"
                   class="vertical-item" />
      </template>
    </el-menu>
  </el-card>

</template>
<script>
import menuItem from './menuItem.vue'
import bussinessUserAuthorizationApi from '@/framework/api/authCenter/bussinessUserAuthorization/bussinessUserAuthorization'

export default {
  name: 'GroTree',
  components: { menuItem },
  props: {
    name: {
      type: String,
      default: ''
    },
    handle: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      switchvalue: true,
      selectedOrg: '',
      orgName: '',
      filterText: '',
      tree: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      currentKey: '',
      //   menuList: [],
      activeIndex: '',
      menuList: [
        {
          id: 232,
          name: '菜单栏目1',
          isAdmin: true
        },
        {
          id: 323,
          name: '菜单栏目2',
          isAdmin: true
        },
        {
          id: 32311,
          name: '菜单栏目3',
          isAdmin: true,
          children: [
            {
              id: 12344332121,
              name: '菜单栏目3-1',
              isAdmin: true,
              children: [
                {
                  id: 1234423321,
                  name: '菜单栏目3-1-1',
                  isAdmin: true,
                  children: [
                    {
                      id: 42142,
                      name: '菜单栏目3-1-1-1',
                      isAdmin: true
                    },
                    {
                      id: 112412,
                      name: '菜单栏目3-1-1-2',
                      isAdmin: true
                    }
                  ]
                },
                {
                  id: 123433221,
                  name: '菜单栏目3-1-2',
                  isAdmin: true
                }
              ]
            },
            {
              id: 123433221,
              name: '菜单栏目3-2',
              isAdmin: true
            }
          ]
        },
        {
          id: 1,
          name: '菜单栏目4',
          isAdmin: true,
          children: [
            {
              id: 2,
              name: '菜单栏目4-1',
              isAdmin: true
            },
            {
              id: 3,
              name: '菜单栏目4-2',
              isAdmin: true,
              children: [
                {
                  id: 4,
                  name: '菜单栏目4-2-1',
                  isAdmin: true,
                  children: [
                    {
                      id: 42,
                      name: '菜单栏目4-2-1-1',
                      isAdmin: true
                    },
                    {
                      id: 53,
                      name: '菜单栏目4-2-2-2',
                      isAdmin: true
                    }
                  ]
                },
                {
                  id: 5,
                  name: '菜单栏目4-2-2',
                  isAdmin: true
                }
              ]
            }
          ]
        }
      ]
    }
  },
  computed: {
    lightTheme() {
      return `${this.$store.state.settings.theme}19`
    }
  },
  watch: {
    filterText(val) {
      bussinessUserAuthorizationApi.getOrgTree({ orgId: 0, orgName: val }).then((res) => {
        const data = res.data.map((item, index) => {
          item.orgId = item.id
          item.orgName = item.name
          return item
        })
        this.tree = data
      })
    }
  },
  created() {
    // this.getmenuList()
  },
  methods: {
    handleSelect() {},
    getmenuList() {
      setTimeout(() => {
        this.menuList = [
          {
            title: '用户中心',
            children: [{ title: '概览' }, { title: '用户注册' }]
          },
          {
            title: '权限中心',
            children: [
              { title: '接口权限授权', children: [{ title: '关联接口' }, { title: '批量解除' }] },
              { title: '接口管理' }
            ]
          }
        ]
      }, 100)
    },
    // // 懒加载
    load(tree, resolve) {
      let orgid = ''
      if (!tree.data || tree.data.length === 0) {
        orgid = 0
        return
      } else {
        orgid = tree.data.id
      }
      bussinessUserAuthorizationApi.getOrgTree({ orgId: orgid }).then((res) => {
        const data = res.data.map((item, index) => {
          this.selectedOrg = res.data[0]
          this.currentKey = res.data[0].id
          this.$nextTick(() => {
            this.$refs.tree.setCurrentKey(res.data[0].id)
          })
          return item
        })
        resolve(data)
      })
    },
    /**
         * 选中树节点
         */
    handleNodeClick(data) {
      this.selectedOrg = data
      this.$emit('treeClick', data)
    },
    // 获取左侧组织树
    initTree() {
      const that = this
      bussinessUserAuthorizationApi.getOrgTree({ orgId: 0 }).then((res) => {
        that.tree = res.data
        this.selectedOrg = res.data[0]
        this.currentKey = res.data[0].id
        this.$emit('treeClick', res.data[0])
        this.$nextTick(() => {
          this.$refs.tree.setCurrentKey(res.data[0].id)
        })
      })
    },
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    handleOpen(key, keyPath) {
    },
    handleClose(key, keyPath) {
    }
  }

}
</script>
    <style lang="scss" scoped>
    .cardHeader {
      .headSpan {
        font-size: 16px;
        font-family: HarmonyOS Sans SC-Medium, HarmonyOS Sans SC;
        font-weight: 500;
        color: #131414;
        line-height: 24px;
      }

      .headBtn {
        float: right;
        border-radius: 4px 4px 4px 4px;
        opacity: 1;
        line-height: 24px;
        padding: 0;
      }
    }

    .svg-icon {
      font-size: 24px;
      display: block;
      margin-right: 8px !important;
      float: none !important;
    }
    .treeTop{
      display: flex;
      align-items: center;
      justify-content: space-between;
      .treetop-left{
        display: flex;
        align-items: center;
      }
    }

    .left-title {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-bottom: 16px;
    }

    .left-tree {
      margin-top: 23px;
    }

    ::v-deep .el-card__header {
      padding: 0;
      border-bottom: none;
    }

    ::v-deep .el-card__body {
      padding: 0;
    }

    ::v-deep .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
      background-color: var(--lightOpacity)
    }

    ::v-deep .el-tree-node__content:hover,
    .el-upload-list__item:hover {
      background-color: var(--lightOpacity)
    }

    ::v-deep .el-tree-node__content {
      overflow: hidden;
      margin: 1px 0px
    }

    ::v-deep .el-dropdown-menu__item {
      padding: 6px 16px;
      line-height: 24px;
    }

    .custom-tree-node {
      display: flex;
      align-items: center;
      overflow: hidden;
      width: 100%;

      .tree-name {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        flex: 1;
      }

      .btn {
        color: var(--themeColor);

        i {
          margin-right: 8px;
          font-size: 16px;
        }
      }

      .el-dropdown-link {
        margin-right: 8px;
        display: block;
        width: 16px;
        height: 16px;
        text-align: center;
      }

      .el-dropdown-link:hover {
        color: var(--themeColor);
      }
    }
    </style>

